<?php

use yii\helpers\Url;

/* @var $this yii\web\View */
$this->title = 'G力';
?>
<section class="page-section page-form" style="display: block; overflow: scroll;">
    <div class="banner"></div>
    <form action="">
        <div class="form-box">
            <div class="form-title">请填写资料</div>
            <ul class="form-content">
                <li class="form-item required">
                    <span class="flex-item form-item-label">姓名</span>
                    <div class="flex-item form-item-content">
                        <input type="text" name="name" placeholder="请输入姓名">
                    </div>
                </li>
                <li class="form-item required">
                    <span class="flex-item form-item-label">开始参赛时间</span>
                    <div class="flex-item form-item-content has-arrow">
                        <input type="date" name="start" placeholder="请输入开跑时间">
                    </div>
                </li>
                <li class="form-item required">
                    <span class="flex-item form-item-label">半马参赛次数</span>
                    <div class="flex-item form-item-content has-arrow">
                        <input type="text" name="ban_num" placeholder="请输入参加次数">
                    </div>
                </li>
                <li class="form-item required">
                    <span class="flex-item form-item-label">半马最佳战绩</span>
                    <div class="flex-item form-item-content multi-input">
                        <input type="text" class="" name="bh">
                        <span class="colon">:</span>
                        <input type="text" class="" name="bm">
                        <span class="colon">:</span>
                        <input type="text" class="" name="bs">
                    </div>
                </li>
                <li class="form-item required">
                    <span class="flex-item form-item-label">全马参赛次数</span>
                    <div class="flex-item form-item-content has-arrow">
                        <input type="text" name="q_num" placeholder="请输入参加次数">
                    </div>
                </li>
                <li class="form-item required">
                    <span class="flex-item form-item-label">全马最佳战绩</span>
                    <div class="flex-item form-item-content multi-input">
                        <input type="text" class="" name="qh">
                        <span class="colon">:</span>
                        <input type="text" class="" name="qm">
                        <span class="colon">:</span>
                        <input type="text" class="" name="qs">
                    </div>
                </li>
            </ul>
            <div class="form-title">选择赛事</div>
            <ul class="form-content form-create">
                <li class="form-item form-adds">
                    <span class="flex-item form-item-label">参加过的赛事</span>
                    <div class="flex-item form-item-content has-arrow" id="select-competition">
                        <!-- <span class="placeholder" id="parts">选择赛事名称</span> -->
                        <input type="text" placeholder="选择赛事名称" disabled>
                    </div>
                    <!-- <button type="button" class="form-control-remove"></button> -->
                </li>
                <li class="form-item">
                    <!-- <span class="flex-item form-item-label"></span> -->
                    <div class="flex-item form-item-content" id="add-item">
                        <span class="placeholder add" id="add-competition">添加自定义赛事</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="form-btn form-submit">确定提交</div>
    </form>
    <!-- 选择赛事弹出层 -->
    <div class="pop-selection" id="pop-selection">
        <div class="form-box">
            <div class="form-title">请选择参加过的赛事名称</div>
            <ul class="form-content">
                <li class="form-item">
                    <span class="flex-item form-item-label">深圳大鹏新年马拉赛</span>
                    <div class="flex-item form-item-content no-pd">
                        <input type="checkbox" name="saishi" value="深圳大鹏新年马拉赛">
                    </div>
                </li>
                <li class="form-item">
                    <span class="flex-item form-item-label">无锡马拉松</span>
                    <div class="flex-item form-item-content no-pd">
                        <input type="checkbox" name="saishi" value="无锡马拉松">
                    </div>
                </li>
                <li class="form-item">
                    <span class="flex-item form-item-label">重庆国际马拉松</span>
                    <div class="flex-item form-item-content no-pd">
                        <input type="checkbox" name="saishi" value="重庆国际马拉松">
                    </div>
                </li>
                <li class="form-item">
                    <span class="flex-item form-item-label">徐州国际马拉松</span>
                    <div class="flex-item form-item-content no-pd">
                        <input type="checkbox" name="saishi" value="徐州国际马拉松">
                    </div>
                </li>
                <li class="form-item">
                    <span class="flex-item form-item-label">上海马拉松</span>
                    <div class="flex-item form-item-content no-pd">
                        <input type="checkbox" name="saishi" value="上海马拉松">
                    </div>
                </li>
                <li class="form-item">
                    <span class="flex-item form-item-label">上海马拉松</span>
                    <div class="flex-item form-item-content no-pd">
                        <input type="checkbox" name="saishi" value="上海马拉松">
                    </div>
                </li>
            </ul>
        </div>
        <div class="form-btn" id="pop-btn">确定</div>
    </div>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script>

    $(function () {

        // 删除赛事名称
        $('.form-content').on('click', '.form-control-remove', function () {
            $(this).closest('.form-item:not(.form-adds)').slideUp(function () {
                $(this).remove();
            })
        })

        // 新增自定义赛事
        $('#add-item').on('click', function () {
            $(this).parent().before(`
                    <li class="form-item form-create-adds">
                        <span class="flex-item form-item-label">参加过的赛事</span>
                        <div class="flex-item form-item-content" id="select-competition">
                            <!-- <span class="placeholder" id="parts">选择赛事名称</span> -->
                            <input type="text" placeholder="请输入参加过的赛事">
                        </div>
                        <button type="button" class="form-control-remove"></button>
                    </li>
                `)
        })

        // 选择弹出框
        $('#select-competition').on('click', function () {
            $('#pop-selection').show();
        })

        var text = []
        $('#pop-btn').on('click', function () {
            // text.push($('#pop-selection input:checked').parent().prev().text())
            $('#pop-selection').hide();
            $('#pop-selection input:checked').each(function (item, value) {
                text.push(value.value)
            })
            $('#select-competition input').val(text)
        })

        $(".required input").blur(function () {
            var $this = $(this);
            var $parent = $this.closest('.form-item');
            $this.val() === '' ? $parent.addClass('form-error') : $parent.removeClass('form-error')

            if ($this.attr('name') === 'tel') {
// 验证电话
            }
        }).keyup(function () {
            $(this).triggerHandler("blur");
        }).focus(function () {
            $(this).triggerHandler("blur");
        });

        // 提交
        $('.form-submit').on('click', function () {
            $(".required input").trigger("blur");
            if ($('.form-error').length !== 0) {
                alert('请填写参赛信息');
                return false;
            }

            // $('.form-create .form-item input')
            $('.form-create-adds').each(function (item, value) {
                var vals = $('.form-create-adds').eq(item).find('input').val()
                text.push(vals)
            })

            var _csrf = '<?= Yii::$app->request->csrfToken ?>';
            var object = {
                name: $('input[name="name"]').val(),
                start: $('input[name="start"]').val(),
                ban_num: $('input[name="ban_num"]').val(),
                ban_result: $('input[name="bh"]').val() + ':' + $('input[name="bm"]').val() + ':' + $('input[name="bs"]').val(),
                q_num: $('input[name="q_num"]').val(),
                q_result: $('input[name="qh"]').val() + ':' + $('input[name="qm"]').val() + ':' + $('input[name="qs"]').val(),
                events: text.length,
                "_csrf-frontend": _csrf
            }
            $.post('/index.php?r=share/submit', object, function (data) {
                if (data.status == 'y') {
                    window.location.href = '/index.php?r=share/show&id=' + data.data.id;
                } else {
                    alert(data.msg);
                }
            }, 'json')
        })
    })

</script>
